<template>
	<view class="shop-swiper-class">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" :current="current" @change=changeCurrent>
			<block v-for="(item,index) in bannerList" :key="index">
				<swiper-item class="swiper-item">
					<image :src="item" mode="scaleToFill"></image>
				</swiper-item>
			</block>
		</swiper>
		<view class="indicatorDots-x">
			{{current+1}}/{{bannerList.length}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bannerList: {
				type: Array,
				default: () => []
			},
			 
		},
		data() {
			return {
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				current: 0,
			}
		},
		methods: {
			changeCurrent(e) {
				let current = e.detail.current
				this.current = current
				// console.log('e',e)
			},
		}
	}
</script>

<style lang="scss" scoped>

	.shop-swiper-class {
		height: 750rpx;
		width: 750rpx;
		position: relative;

		.swiper {
			height: 100%;
			width: 750rpx;

			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}

			}
		}

		.indicatorDots-x {
			z-index: 111;

			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
			border-radius: 436rpx;
			padding: 6rpx 24rpx;
			background: rgba(0, 0, 0, 0.39);
			color: rgba(255, 255, 255, 1);

		}
	}
</style>
